<template>
  <div class="page-content">
    <nav-bar title="掌上有信-个人中心"></nav-bar>
    <div class="pages-content">
      <div class="user-info-box">
        <div class="user-info-left">
          <img :src="myInfo.avatarUrl" alt="暂无">
          <div class="left-tip">
            <div class="left-tip-top">{{ myInfo.nickName || '微信名称' }}</div>
            <!-- <div class="left-tip-bottom">微信个人信息</div> -->
          </div>
        </div>
        <!-- <div class="user-info-right">
          <tm-button theme="green" size="s" @click="writeInfo">去完善资料</tm-button>
        </div> -->
      </div>
      <div class="">
        <!-- left-icon="icon-QQ"   left-icon="icon-collection-fill"  left-icon="icon-user-fill" left-icon-color="pink" -->
        <tm-grouplist title="个人信息" title-theme="blue text" :shadow="24" :round="10" :padding="[42, 42]">
          <tm-listitem title="掌心号" show-left-icon :value="myInfo.userCode"></tm-listitem>
          <tm-listitem title="昵称" show-left-icon :value="myInfo.nickName" @click="listClick('nickName')"></tm-listitem>
          <tm-listitem title="手机号" show-left-icon :value="myInfo.phoneNum" @click="listClick('phoneNum')"></tm-listitem>
        </tm-grouplist>
        <tm-grouplist title="职业" title-theme="blue text" :shadow="24" :round="10" :padding="[42, 42]">
          <tm-switchList
            v-for="item in zyData"
            :key="item.id"
            :on="onSwitch"
            :actions="item_0"
            :rightLabel="zyStatus(item)"
            :height="88"
            :iconSize="32"
            title="职业"
            @actionsClick="(obj) => actionsClick(item, obj)"
          ></tm-switchList>
        </tm-grouplist>
      </div>
      <div class="pl-32 addMore" @click="addMore">添加更多信息</div>
    </div>
    <!-- 个人信息完善 -->
    <uni-popup
      ref="selfInfoRef"
      background-color="#fff"
      type="right"
      @change="popupChange"
    >
      <div class="popup-big-content">
        <nav-bar title="个人信息" :backTo="backTo"></nav-bar>
        <div class="popup-content">
          <div class="standard-list">
            <div class="list-left">笔名</div>
            <div class="list-right">xxxxxxxx</div>
          </div>
          <div class="standard-list">
            <div class="list-left">邮箱</div>
            <div class="list-right">xxxxxxxx</div>
          </div>
          <div class="standard-list">
            <div class="list-left">心语</div>
            <div class="list-right">xxxxxxxx</div>
          </div>
          <div class="standard-list">
            <div class="list-left">身份证号</div>
            <div class="list-right">xxxxxxxx</div>
          </div>
          <div class="standard-list">
            <div class="list-left">资格证书</div>
            <div class="list-right">xxxxxxxx</div>
          </div>
        </div>
      </div>
    </uni-popup>
     <!-- zh_url -->
    <uni-popup
      ref="addMoreRef"
      background-color="#fff"
      type="right"
    >
      <div class="page-content">
        <nav-bar title="添加更多" leftIcon=""></nav-bar>
        <div class="pages-content">
          <tm-sheet :shadow="24" :padding="[12,24]" :margin="[24,24]">
            <tm-form ref="formData">
              <tm-pickers :default-value.sync="reqData.zyArr" rang-key="title" :list="getZy">
                <tm-input name="chexing"  required title="职业类型" placeholder="请选择掌信类型" disabled :value="obTstr2(reqData.zyArr)" right-icon="icon-angle-right"></tm-input>
              </tm-pickers>
              <view class="py-12 px-24 mx-12 round-3 border-b-1 grey text" :class="tmVuetify.black ? 'bk' : ''">
                <text class="text-size-n text-weight-b ">添加附件</text><text class="text-grey text-size-xs px-10">(最多可以上传8张)</text>
              </view>
              <!-- url="http://192.168.137.161:8002/xai/sys/common/upload" -->
                  <!-- url="http://123.60.23.147:8002/xai/sys/common/upload" -->
              <view class="py-32 mx-12">
                <tm-upload
                  ref="uploadRef"
                  color="grey"
                  :url="uploadUrl"
                  :max="2"
                  :filelist.sync="reqData.filelist"
                  autoUpload
                  :grid="4"
                ></tm-upload>
              </view>
            </tm-form>
          </tm-sheet>
        </div>
        <div class="bom-btn">
          <div class="cancel bom-btn-item" @click="backTo">取消</div>
          <div class="sure bom-btn-item" @click="sure">确定</div>
        </div>
      </div>
    </uni-popup>
    <!-- 弹出框输入 -->
    <uni-popup
      ref="idModalShowRef"
      type="dialog"
      @change="popupChange"
    >
      <uni-popup-dialog
        title=" "
        :before-close="true"
        @close="idModalClose"
        @confirm="idConfirm"
      >
        <slot name="default">
          <uni-easyinput
            v-model="inputDeploy.idValue"
            :type="inputDeploy.type"
            :placeholder="inputDeploy.placeholder"
          ></uni-easyinput>
        </slot>
      </uni-popup-dialog>
    </uni-popup>
  </div>
</template>

<script>
import { uploadUrl } from '@/api/common/request-name.js'
import { getLocal } from '@/lib/logicHandle'
import $global from '@/module/tipsGroup'
import navBar from '@/components/nav-bar/index.vue'
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmGrouplist from '@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue';
import tmSwitchList from '@/tm-vuetify/components/tm-switchList/tm-switchList.vue';
import tmListitem from '@/tm-vuetify/components/tm-listitem/tm-listitem.vue';
import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
let that = null
export default {
  components: {
    navBar,
    tmButton,
    tmGrouplist,
    tmListitem,
    tmUpload,
    tmPickers,
    tmInput,
    tmSwitchList,
    tmIcons
  },
  // mixins: [navbar],
  data () {
    return {
      uploadUrl: uploadUrl,
      isEdit: false, //是否为编辑
      onSwitch: false,
      inputDeploy: {
        key: '',
        type: 'text',
        placeholder: '请输入掌心号',
        idValue: ''
      },
      myInfo: {},
      zyData: [],
      reqData: {},
      item_0:[
        {text: "编辑",width: 120,color: 'green'},
        {text: "删除",width: 120,color: 'red'}
      ],
    }
  },
  async onLoad (options) {
    that = this
    this.requestUserInfo()
  },
  computed: {
    userProfile () {
      return this.$store.state.userProfile || {
        userInfo: {}
      }
    },
    getZy () {
      return getLocal('zy') || []
    }
  },
  methods: {
    // 请求用户基本信息
    async requestUserInfo () {
      const myInfo = await this.$store.dispatch('getjbxxbyuserid')
      this.myInfo = myInfo.liteUser || {}
      this.zyData = myInfo.certificates
    },
    navChange (obj) {
      uni.navigateTo({
        url: obj.item.paths
      })
    },
    obTstr2(o){
      if(Array.isArray(o)){
        if(o.length.length===0) return "";
        return o[0]?.title??""
      }
      return ''
    },
    writeInfo () {
      this.$refs.addMoreRef.open()
      this.$refs.uploadRef.getRect()
    },
    backTo () {
      that.$refs.addMoreRef.close()
    },
    addMore () {
      this.reqData = {
        filelist: []
      }
      this.writeInfo()
    },
    async sure () {
      const { id, zyArr, filelist = [] } = this.reqData
      let message = ''
      let interName = ''
      console.log('this', this);
      if (id) {
        message = '编辑'
        interName = 'setUsercertificateEdit'
      } else {
        message = '新增'
        interName = 'setUsercertificateAdd'
      }
      const sendData = {
        id,
        checkStatus: '审核中',
        name: zyArr[0].title,
        type: zyArr[0].id,
        path: filelist.join(',')
      }
      await this.$store.dispatch(interName, sendData)
      // return
      // if (this.isEdit) {
      //   await this.$store.dispatch('getBjyhzy', sendData)
      //   message = '编辑'
      // } else {
      //   await this.$store.dispatch('getAdduserzy', sendData)
      //   message = '新增'
      // }
      $global.$toast('success', `${message}成功`)
      this.backTo()
      this.requestUserInfo()
    },
    popupChange (obj) {
      if (obj.show) {
        // this.inputDeploy.idValue = ''
      }
    },
    zyHandle (id) {
      const zy = this.getZy
      return zy.filter(item => item.id === id).map(item => item.title).join(',')
    },
    zyStatus(obj) {
      // checkStatus
      const checkStatus = obj.checkStatus
      const name = this.zyHandle(obj.type)
      return checkStatus ? `${name}(${checkStatus})` : name
    },
    async actionsClick (data, actions) {
      const { id, type, path = '' } = data
      // 0 是编辑, 1是删除
      if (actions.index === 0) {
        this.isEdit = true
        this.reqData = {
          id,
          zyArr: [{ id: type, title: this.zyHandle(type) }],
          filelist: path ? path.split(',') : []
        }
        this.writeInfo()
      } else {
        await this.$store.dispatch('setUsercertificateDelete', { id })
        // await this.$store.dispatch('setDeluserzy', { id })
        $global.$toast('success', '删除成功')
        this.requestUserInfo()
      }
    },
    listClick (key) {
      if (key === 'nickName') {
        this.inputDeploy = {
          key,
          type: 'text',
          placeholder: '请输入昵称',
          idValue: this.myInfo[key] || ''
        }
      } else if (key === 'phoneNum') {
        this.inputDeploy = {
          key,
          type: 'number',
          placeholder: '请输入手机号',
          idValue: this.myInfo[key] || ''
        }
      }
      this.$nextTick(() => {
        this.idModalOpen()
      })
    },
    idModalClose () {
      this.$refs.idModalShowRef.close()
    },
    idModalOpen () {
      this.$refs.idModalShowRef.open()
    },
    async idConfirm () {
      const { idValue, placeholder, key } = this.inputDeploy
      if (!idValue) {
        $global.$toast('fail', placeholder)
        return
      }
      const sendData = {
        [key]: idValue
      }
      await this.$store.dispatch('setUpd', sendData)
      $global.$toast('success', '修改成功')
      this.idModalClose()
      this.requestUserInfo()
    },
    uploadChange (file) {
      console.log(file);
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-big-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  .popup-content {
    flex: 1;
  }
}

</style>
